import React from 'react'
import './style.css'
import instance from '../../service/request'
// import liudehuaURL from '../../assets/images/liudehua.JPG'
import imgData from './imgData.json'

class SubjectRecognition extends React.Component {
    state = {
        faceResult:[{
            confidence:0.9984647912328027,
            face_detail:{
                h: 250,
                w:191,
                x:283,
                y:46
            },
            label:'刘德华'
        }]
    }
    getHumanMessage = async (imgUrl)=> {
        try {
            const result = await instance({
                url:'/runCelebrityRecognition',
                data:JSON.stringify({
                    "image":imgUrl
                }),
                method:'post',
                
            })
            this.setState({
                faceResult: result.result
            })
        } catch(error){
        }
    }
    setImgUrl = url => {
        document.getElementById("imgMajor").src = 'data:image/jpeg;base64,'+url
        this.getHumanMessage(url)
    }
    setTagMes = val => {
        const tagMesContent = document.getElementById("tagMesContent")
        const tagMes = document.getElementById("tagMes")
        const tagJsonContent = document.getElementById("tagJsonContent")
        const tagJson = document.getElementById("tagJson")
        if(val === 1){
            tagMesContent.style.display = "block"
            tagMes.style.color = "#286eff"
            tagJson.style.color = "#a9bce4"
            tagJsonContent.style.display = "none"
        }else{
            tagMesContent.style.display = "none"
            tagMes.style.color = "#a9bce4"
            tagJson.style.color = "#286eff"
            tagJsonContent.style.display = "block"
        }
    }
    uploadImg = (e) =>{
        var reader = new FileReader();
        var value = e.nativeEvent.srcElement.files[0];
        if(!value) return false;
        if(value.type.indexOf("image") === -1){
            alert("请上传图片")
        }
        reader.readAsDataURL(value);
        const _getHumanMessage = this.getHumanMessage
        reader.onload = function(ev){
            const imgUrl = ev.currentTarget.result.split(',')[1]
            _getHumanMessage(imgUrl)
            document.getElementById("imgMajor").src = ev.currentTarget.result
        }
    
    }
    render() {
        return(
            <div className='subjectRecognition'>
                <div className='content'>
                    <div className='content-left'>
                        <div className='content-img'>
                            <div>
                                <img id="imgMajor" src={'data:image/jpeg;base64,'+imgData.liudehua} alt="" />
                                {/* <div id="facePosition"
                                style={{
                                    top:this.state.faceResult[0].face_detail.y,
                                    left:this.state.faceResult[0].face_detail.x,
                                    width:this.state.faceResult[0].face_detail.w,
                                    height:this.state.faceResult[0].face_detail.h,
                                }}
                                ></div> */}
                            </div>
                            
                        </div>
                        <div className='content-group'>
                            <div className='content-item' onClick={() => this.setImgUrl(imgData.liudehua)}>
                                <img src={'data:image/jpeg;base64,'+imgData.liudehua} alt="" />
                            </div>
                            <div className='content-item' onClick={() => this.setImgUrl(imgData.mick)}>
                                <img src={'data:image/jpeg;base64,'+imgData.mick} alt="" />
                            </div>
                            <div className='content-item' onClick={() => this.setImgUrl(imgData.aiyinsitan)}>
                                <img src={'data:image/jpeg;base64,'+imgData.aiyinsitan} alt="" />
                            </div>
                            <div className='content-item' onClick={() => this.setImgUrl(imgData.chenglong)}>
                                <img src={'data:image/jpeg;base64,'+imgData.chenglong} alt="" />
                            </div>
                            <div className='content-item upload-img'>
                                <input type="file" accept="image/jpg" id="uploadImg" onChange={this.uploadImg} />
                                <label className="uploadImg-button" htmlFor="uploadImg">
                                    <i className='bx bx-upload bx-flip-horizontal' style={{color:"#fff"}} ></i>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div className='content-right'>
                        <div className='tag-header'>
                            <div id="tagMes" onClick={() => this.setTagMes(1)}>
                                分析结果
                            </div>
                            <div id='tagJson' onClick={() => this.setTagMes(2)}>
                                Response JSON
                            </div>
                        </div>
                        <div className='tag-content'>
                            <div id='tagMesContent'>
                                <div>
                                    <span>相似度</span>
                                    <span>{this.state.faceResult[0].confidence}</span>
                                </div>
                                <div>
                                    <span>姓名</span>
                                    <span>{this.state.faceResult[0].label}</span>
                                </div>
                            </div>
                            <div id='tagJsonContent'>
                                {JSON.stringify(this.state.faceResult[0])}
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        )
    }
}
export default SubjectRecognition